<template>
  <div class="user-edit">
    <div class="main-container container-limited container-fluid">
      <div class="my-card m-y-10">
        <profile-header-user-cover :user="curUser" edit />
        <div class="profile-header-main">
          <profile-header-avatar :user="curUser" />
          <div class="profile-header-content">
            <div class="profile-header-content-head">
              <h1 class="profile-header-title">
                <form-nickname class="nickname-field field" />
                <button class="button button--plain" @click="$router.push(`/users/${curUser.id}`)">
                  返回我的主页<right-arrow-icon />
                </button>
              </h1>
            </div>
            <information-form />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import RightArrowIcon from '@/views/users/edit/components/arrow-right-icon';
import InformationForm from '@/views/users/edit/profile-edit-fields';
import ProfileHeaderAvatar from '@/views/users/show/components/profile-header-avatar';
import FormNickname from '@/views/users/edit/components/form-nickname';
import ProfileHeaderUserCover from '@/views/users/show/components/profile-header-user-cover';

export default {
  name: 'UserEdit', // 个人资料编辑页面
  components: {
    RightArrowIcon,
    InformationForm,
    ProfileHeaderAvatar,
    FormNickname,
    ProfileHeaderUserCover,
  },
  computed: {
    ...mapState({ curUser: 'currentUser' }),
  },
};
</script>

<style></style>
